<template>
  <div class="hot-showing-container">
    <!-- 顶部横幅区域 - 使用更现代的设计 -->
    <div class="banner-section">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">热映电影</h1>
        <p class="banner-subtitle">精选当下最热门的电影，不容错过的视觉盛宴</p>
        
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input 
            placeholder="搜索你感兴趣的电影" 
            prefix-icon="el-icon-search"
            v-model="searchQuery"
            @keyup.enter="searchMovies"
            clearable
          >
          </el-input>
          <el-button type="danger" @click="searchMovies">搜索</el-button>
        </div>
      </div>
    </div>
    
    <!-- 分类标签 - 更现代的设计 -->
    <div class="category-section">
      <div class="category-tags">
        <div 
          v-for="(tag, index) in movieTags" 
          :key="index"
          :class="['movie-tag', activeTag === index ? 'active-tag' : '']"
          @click="filterByTag(index)"
        >
          {{ tag }}
        </div>
      </div>
    </div>
    
    <!-- 电影列表区域 - 更美观的卡片设计 -->
    <div class="movies-section">
      <transition-group name="movie-fade" tag="div" class="movies-grid">
        <div 
          v-for="item in allFilm" 
          :key="item.id" 
          class="movie-card"
          @click="goToDetail(item.id)"
          @mouseenter="mouseenter(item.id)"
          @mouseleave="mouseleave(item.id)"
        >
          <div class="movie-poster">
            <img :src="item.photo" alt="电影海报" class="poster-image" />
            <div class="movie-rating">
              <span class="rating-value">{{ item.rating || '暂无' }}</span>
              <el-rate 
                v-model="item.rating" 
                disabled 
                text-color="#ff9900"
                score-template="{value}" 
                :max="5"
              ></el-rate>
            </div>
            <div class="movie-overlay">
              <div class="overlay-content">
                <el-button type="danger" round  class="buy-ticket-btn">立即购票</el-button>
                <el-button type="info" round plain class="details-btn" style="margin-left: 0;">查看详情</el-button>
              </div>
            </div>
          </div>
          <div class="movie-info">
            <h3 class="movie-title">{{ item.name }}</h3>
            <p class="movie-category">{{ item.type }}</p>
            <div class="movie-meta">
              <span class="movie-length"><i class="el-icon-time"></i> {{ item.movieLength }}分钟</span>
              <span class="movie-price">￥{{ item.price }}</span>
            </div>
            <p class="movie-date">{{ formatTime(item.time) }} 上映</p>
          </div>
          
          <!-- 悬浮信息卡片 -->
          <div class="hover-info" :id="item.id">
            <div class="hover-info-content">
              <h4>电影详情</h4>
              <p><span class="label">类型：</span>{{ item.type }}</p>
              <p><span class="label">片长：</span>{{ item.movieLength }}分钟</p>
              <p><span class="label">上映：</span>{{ formatTime(item.time) }}</p>
              <p v-if="item.director"><span class="label">导演：</span>{{ item.director }}</p>
              <p v-if="item.actors"><span class="label">主演：</span>{{ item.actors }}</p>
              <p v-if="item.type" class="movie-description">{{ item.intro }}</p>
            </div>
          </div>
        </div>
      </transition-group>
      
      <!-- 无数据提示 -->
      <div v-if="allFilm.length === 0" class="no-data">
        <i class="el-icon-film"></i>
        <p>暂无电影数据</p>
      </div>
    </div>
    
    <!-- 加载更多区域 -->
    <div class="load-more" v-if="allFilm.length > 0">
      <el-button type="primary" @click="loadMore" class="load-more-btn">
        <i class="el-icon-plus"></i> 查看更多电影
      </el-button>
    </div>

    <!-- 返回顶部 -->
    <el-backtop :right="20" :bottom="20">
      <div class="backtop-inner">
        <i class="el-icon-caret-top"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reqAllFilm, reqFilmByType } from "@/api/moive";
import { FilmResponseData, Records } from "@/api/moive/type.ts";
import { useRouter } from "vue-router";
import { formatTime } from "@/util/common.ts";
import qs from "qs";

let $router = useRouter();
let allFilm = ref<Records>([]);
let pageSize = ref(20);
let searchQuery = ref("");

// 电影分类标签
const movieTags = ref(['全部', '动作', '喜剧', '爱情', '科幻', '恐怖', '动画', '剧情']);
const activeTag = ref(0);

onMounted(() => {
  getAll();
});

const getAll = async () => {
  let data = qs.stringify({
    name: searchQuery.value,
    page: 1,
    pageSize: pageSize.value
  });
  let result: FilmResponseData = await reqAllFilm(data);
  if (result.code === 1) {
    allFilm.value = result.data.records;
    console.log(result.data);
  }
};

// 搜索电影
const searchMovies = () => {
  getAll();
};

// 加载更多电影
const loadMore = () => {
  pageSize.value += 20;
  if (activeTag.value === 0) {
    getAll();
  } else {
    getFilmByType(movieTags.value[activeTag.value]);
  }
};

// 根据标签筛选电影
const filterByTag = (index: number) => {
  activeTag.value = index;
  if (index === 0) {
    // 全部电影
    getAll();
  } else {
    // 根据类型筛选电影
    const category = movieTags.value[index];
    console.log(`筛选分类: ${category}`);
    getFilmByType(category);
  }
};

// 根据电影类型获取电影列表
const getFilmByType = async (type: string) => {
  let data = qs.stringify({
    type: type,
    name: searchQuery.value,
    page: 1,
    pageSize: pageSize.value
  });
  let result: FilmResponseData = await reqFilmByType(data);
  if (result.code === 1) {
    allFilm.value = result.data.records;
    console.log(result.data);
  }
};

const mouseenter = (id: any) => {
  const element = document.getElementById(id.toString());
  if (element) {
    element.style.opacity = "1";
    element.style.transform = "translateX(0)";
  }
};

const mouseleave = (id: any) => {
  const element = document.getElementById(id.toString());
  if (element) {
    element.style.opacity = "0";
    element.style.transform = "translateX(-20px)";
  }
};

const goToDetail = (id: any) => {
  console.log(id);
  $router.push({
    path: "/detail",
    query: {
      id: id
    }
  });
};
</script>

<style scoped lang="scss">
.hot-showing-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 60px;
}

/* 顶部横幅区域样式 */
.banner-section {
  position: relative;
  width: 100%;
  padding: 60px 0;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  text-align: center;
  margin-bottom: 30px;
  overflow: hidden;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://img.freepik.com/free-photo/cinema-elements-red-background-with-copy-space_23-2148457853.jpg') center/cover no-repeat;
  opacity: 0.2;
  z-index: 0;
}

.banner-content {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.banner-title {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInDown 1s ease-out;
}

.banner-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 30px;
  animation: fadeInUp 1s ease-out;
}

.search-box {
  display: flex;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
  animation: fadeIn 1.2s ease-out;
}

.search-box .el-input {
  
  margin-right: 10px;
}

/* 分类标签区域 */
.category-section {
  padding: 0 20px;
  margin-bottom: 30px;
}

.category-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0 auto;
  max-width: 80%;
}

.movie-tag {
  cursor: pointer;
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 25px;
  background-color: #f0f0f0;
  color: #555;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.movie-tag:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.active-tag {
  background: linear-gradient(to right, #e53935, #e35d5b);
  color: white;
  box-shadow: 0 5px 15px rgba(229, 57, 53, 0.3);
}

/* 电影区域 */
.movies-section {
  padding: 0 20px;
}

/* 电影网格区域 */
.movies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  width: 85%;
  margin: 0 auto;
}

.movie-card {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.movie-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.movie-poster {
  position: relative;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

.poster-image {
  width: 100%;
  height: 380px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.movie-card:hover .poster-image {
  transform: scale(1.05);
}

.movie-rating {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rating-value {
  color: #ffb400;
  font-weight: bold;
  margin-bottom: 5px;
}

.movie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.movie-card:hover .movie-overlay {
  opacity: 1;
}

.overlay-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  text-align: center;
}

.movie-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.movie-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.movie-category {
  color: #666;
  font-size: 0.95rem;
  text-indent: 2em;
  margin-bottom: 15px;
  line-height: 1.4;
}

.movie-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #777;
}

.movie-date {
  font-size: 0.95rem;
  color: #777;
  margin-bottom: 15px;
}

.movie-price {
  color: #e53935;
  font-weight: bold;
}

.buy-ticket-btn, .details-btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* 悬浮信息卡片 */
.hover-info {
  position: absolute;
  top: 0;
  right: -250px; /* 将卡片放在右侧 */
  width: 230px;
  background-color: rgba(25, 25, 25, 0.95);
  color: white;
  padding: 20px;
  border-radius: 0 15px 15px 0;
  opacity: 0;
  transform: translateX(-20px); /* 改为水平方向的动画 */
  transition: all 0.3s ease;
  z-index: 10;
  max-height: 100%;
  overflow-y: auto;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);
}

.hover-info-content {
  h4 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #e53935;
  }

  p {
    margin: 10px 0;
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .label {
    font-weight: bold;
    color: #e53935;
    margin-right: 5px;
  }

  .movie-description {
    margin-top: 15px;
    font-style: italic;
    line-height: 1.6;
  }
}

/* 加载更多区域 */
.load-more {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.load-more-btn {
  padding: 12px 35px;
  font-size: 1.1rem;
  background: linear-gradient(to right, #1e3c72, #2a5298);
  border: none;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(30, 60, 114, 0.4);
}

/* 无数据提示 */
.no-data {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

.no-data i {
  font-size: 4rem;
  margin-bottom: 20px;
}

/* 返回顶部按钮 */
.backtop-inner {
  height: 100%;
  width: 100%;
  background-color: #e53935;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 10px rgba(229, 57, 53, 0.4);
}

/* 动画效果 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.movie-fade-enter-active, .movie-fade-leave-active {
  transition: all 0.5s ease;
}

.movie-fade-enter-from, .movie-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    width: 90%;
  }
  
  .banner-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .movies-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    width: 95%;
  }
  
  .banner-section {
    padding: 40px 0;
  }
  
  .banner-title {
    font-size: 2rem;
  }
  
  .banner-subtitle {
    font-size: 1rem;
  }
  
  .poster-image {
    height: 280px;
  }
  
  .movie-tag {
    padding: 8px 15px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .movies-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .banner-section {
    padding: 30px 0;
  }
  
  .banner-title {
    font-size: 1.8rem;
  }
  
  .search-box {
    flex-direction: column;
    gap: 10px;
  }
  
  .search-box .el-input {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .category-tags {
    gap: 10px;
  }
  
  .movie-tag {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  .poster-image {
    height: 220px;
  }
}
</style>